<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <!-- 外部样式表 -->
    <style>
      /* 内部样式表 */
      /* 编写CSS时
      书写顺序：
      1.布局定位属性，如display/position/float/clear/visibility/overflow
      2. 自身属性,如width/height/margin/padding/border/backgroud
      3.文本属性,如color/font/text-decoration/text-align/vertical-align/white-space/break-word
      4.其他属性（CSS3），如content/cursor/border-radius/box-shadow*/

      /* 全局属性 */
      * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        cursor: default;
        /* 鼠标样式，默认default，pointer小手，move移动，text文字，not-allowed禁止 */
      }

      a {
        cursor: pointer;
      }

      input,
      textarea {
        outline: none;
        /* 表单轮廓线,none取消轮廓线 */
      }

      textarea {
        resize: none;
        /* 防止文本域大小被拉伸 */
      }

      body {
        height: 3000px;
      }

      #text_attributes {
        /* 文本属性 */
        color: red;
        /* 文本颜色,值可以用
        1.预定义的颜色值：如red
        2.十六进制：如#FF0000
        3.RGB代码：如rgb(255,0,0) */
        text-align: left;
        /* 对齐文本，水平对齐 */
        text-decoration: underline;
        /* 装饰文本,如下划线underline，删除线line-through,默认为none */
        text-indent: 2em;
        /* 文本缩进,em是当前文字的大小 */
        line-height: 22px;
        /* 行间距，包括上下间距和文字大小 */
      }

      #word_attributes {
        /* 文字属性 */
        font-size: 12px;
        /* 文字大小 */
        font-family: "Times New Roman", Times, serif;
        /* 文字字体 */
        font-weight: 600;
        /* 文字粗细 */
        font-style: italic;
        /* 文字样式,如倾斜 */
        /* 复合属性,顺序不能换，必须保留font-size font-family */
        /* font: font-style font-weight font-size font-family; */
        /* font-size:12px/1.5  这个文字大小后面跟的就是其行高*/
        /* font: italic 600 12px "Times New Roman", Times, serif; */
      }

      /* 复合选择器,详细看前端小知识.md */
      /* 后代选择器 */
      div ul li {
        color: #e51414;
      }

      div ul li p {
        color: #0e0e0e;
      }

      /* 子元素选择器 */
      div > p {
        color: aqua;
      }

      /* 并集选择器 */
      span,
      ol {
        color: #0fce35;
      }

      .try {
        width: 500px;
        height: 300px;
        border: 1px solid #000;
        background-image: url(../images/text.jpg);
        /* 背景图片 */
        background-repeat: no-repeat;
        /* 背景平铺，默认都为平铺,可以设置往x轴或y轴平铺 */
        background-position: center;
        /* 背景图片位置
        如果使用方位名词：
        1.两个值前后顺序无关，如 left top 和 top left 效果一样
        2.如果只指定一个方位，另一个默认居中
        如果使用精确坐标：
        1.第一个参数为x轴，第二个为y轴
        2.如果只指定一个值，这个一定是x轴，y轴默认居中
        */

        /* background-attachment: fixed; */
        /* 背景图像固定 */

        /* 复合写法,background的值没有顺序要求 */

        border-radius: 10px 20px 30px;
        /* 圆角边框
        设置为正方形容器宽度的一般，可以使其成圆形
        设置为矩形高度的一半，可以使其成椭圆形
        其值为一个时，四个角弧度都是其值
        其值为四个时，1.左上角 2.右上角 3.右下角 4.左下角
        其值为两个时，1.左上角 右下角 2.右上角 左上角
        其值为三个时，1.左上角 2.右上角 左下角 3.右下角
        */

        box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.3);
        /* 盒子阴影
        其值意义（前两个必须）
        1.x轴阴影 2.y轴阴影 3.模糊距离（阴影虚实） 4.阴影大小 5.阴影颜色 6.内阴影inset 默认外阴影*/
      }

      /* 伪类选择器 */
      .try:hover {
        /* background-color: #e51414; */
        /* 背景颜色，transparent为透明 */
        background-color: rgba(255, 0, 0, 0.7);
        /* 该方法设置背景颜色时，第四个值为透明度 */
        border: none;
      }

      /* 连接伪类选择器要按以下顺序声明 */
      a {
        display: block;
        /* 行元素转换为块元素 */
        color: #e51414;
        text-decoration: none;
      }

      a:link {
        background-color: yellow;
      }

      a:visited {
        background-color: #1ca6fc;
      }

      a:hover {
        color: #000;
        text-decoration: underline;
      }

      a:active {
        color: #0fce35;
      }

      /* focus伪类选择器 */
      input:focus {
        background: #f828d9;
      }

      #test {
        width: 200px;
        height: 40px;
        background-color: #1ca6fc;
        line-height: 40px;
        /* 文字行高与容器高度相等时，可以实现垂直居中效果 */
        text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.7);
        /* 文字阴影
        其值意义（前两个必须）
        1.x轴阴影 2.y轴阴影 3.模糊距离（阴影虚实） 4.阴影大小*/
      }

      /* 浮动
        特点：1.脱离标准流 2.不保存原来位置 3.行、块元素使用后具有行内块元素特点
        4.不会压住文字，可以做文字环绕效果
      */
      .floattest {
        float: left;
        width: 50px;
        height: 50px;
        background-color: #1ca6fc;
        text-align: center;
        line-height: 50px;
        text-decoration: none;
        text-indent: 0;
      }

      #floatright {
        float: right;
      }

      #compare {
        width: 200px;
        height: 30px;
        background: #000;
      }

      /* 清除浮动
      当父盒子不便给高度，但子盒子浮动时需要清除浮动避免父盒子高度为0 */

      /* 额外标签法
      在最后一个浮动的子元素后面添加一个额外标签，添加清除浮动样式 */
      #clear {
        clear: both;
      }

      /* 父级添加overflow法 */
      #floatfather {
        overflow: hidden;
      }

      /* ：after伪元素法 */
      .clearfix::after {
        display: block;
        clear: both;
        visibility: hidden;
        height: 0;
        content: "";
      }

      .clearfix {
        *zoom: 1;
      }

      /* 双伪元素法 */
      .clearfix1::before,
      .clearfix1::after {
        display: table;
        content: "";
      }
      .clearfix1::after {
        clear: both;
      }
      .clearfix1 {
        *zoom: 1;
      }

      /* 定位
      需要规定定位方式+边偏移，子绝父相，会压住文字
      1.静态定位：static 默认定位方式，没有边偏移
      2.相对定位：relative
        特点：1）相对原位置偏移
             2）保存原位置
      3.绝对定位：absolute
        特点：1）如果没有祖先元素或祖先元素没有定位，会以浏览器为准定位
             2）如果祖先元素有定位，会以最近一级有定位的祖先元素为准定位
      4.固定定位：fixed
        特点：1)以浏览器的可视窗口为准定位
             2)不保存原位置
      5.粘性定位：sticky
        特点：1）以浏览器的可视窗口为准定位
             2）保存原位置
             3）必须添加top、left、right、bottom中的一个
      */

      /* 相对定位 */
      .box1 {
        position: relative;
        /* 定位方式 */
        top: 100px;
        left: 100px;
        /* 边偏移 */
        width: 200px;
        height: 200px;
        background-color: #1ca6fc;
      }

      .box2 {
        width: 200px;
        height: 200px;
        background-color: #0fce35;
      }

      /* 绝对定位，子绝父相 */
      .father {
        position: relative;
        width: 300px;
        height: 300px;
        background: #0fce35;
      }

      /* 绝对定位盒子实现水平居中不能用margin：0 auto；
          固定定位也可以用如下方法
      */
      .son {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
        width: 200px;
        height: 200px;
        background: #1ca6fc;
      }

      /* 固定定位 */
      /* 固定在版心右侧步骤
        1.left：50%
        2.margin：版心宽度一半
      */
      .fixeddiv {
        position: fixed;
        top: 100px;
        right: 100px;
        z-index: 999;
        /* 设置叠放次序
            1.数字越大，越在上方
            2.如果数字相同，则按照书写顺序，后来者居上
            3.数字后没单位
            4.只有定位的盒子有该属性
        */
      }

      /* 粘性定位 */
      .stickydiv {
        position: sticky;
        top: 0;
        width: 100px;
        height: 60px;
        background-color: #e51414;
        margin: 100px auto;
        text-align: center;
        line-height: 60px;
      }

      /* 元素的显示和隐藏
          1.display
            设置为none，隐藏
            设置为block，显示
            不保存原位置
          2.visility
            设置hidden，隐藏
            设置为visible，显示
            保存原位置
          3.overflow(隐藏盒子溢出的部分)
            设置为hidden，隐藏
            设置为visible，显示，默认
            设置为scroll，溢出的部分显示滚动条
            设置为auto，在需要的时候显示滚动条
            如果盒子有定位，谨慎使用该属性
      */
      .showorhidden {
        display: none;
        visibility: hidden;
        overflow: auto;
        width: 100px;
        height: 60px;
        background-color: #0fce35;
        margin: 0 auto;
      }

      /* CSS三角形制作 */
      /* 原理 */
      .tri1 {
        width: 0;
        height: 0;
        border-top: 100px solid #000;
        border-right: 100px solid #e51414;
        border-bottom: 100px solid #0fce35;
        border-left: 100px solid #1ca6fc;
      }
      /* 实现 */
      .tri2 {
        width: 0;
        height: 0;
        border-top: 100px solid transparent;
        border-right: 100px solid #000;
        border-bottom: 100px solid transparent;
        border-left: 100px solid transparent;
      }
      .tri3 {
        position: relative;
        width: 120px;
        height: 240px;
        background-color: #f828d9;
      }
      .tri3 span {
        position: absolute;
        right: 15px;
        top: -20px;
        width: 0;
        height: 0;
        line-height: 0;
        font-style: 0;
        border: 10px solid transparent;
        border-bottom-color: #e51414;
      }

      /* 图片，表单与文字垂直居中对齐，要求行内块元素 */
      .wordcenter img,
      .wordcenter textarea {
        /* vertical-align: baseline; */
        /* 基线对齐，默认 */
        /* vertical-align: bottom; */
        /* 底线对齐 */
        /* vertical-align: top; */
        /* 顶部对齐 */
        vertical-align: middle;
        /* 中线对齐 */
      }

      /* 图片底部空白空隙
          产生原因：为图片文字基线对齐方式留空间
          解决方法：1.设置vertical-align不为baseline，推荐
                   2.图片转换为块元素
      */
      .intervalsolve {
        border: 1px solid #0fce35;
      }

      .intervalsolve img {
        vertical-align: middle;
      }

      /* 单行溢出文字省略号显示步骤
          1. 强制文字一行内显示 white-space: nowrap;
          2.溢出部分隐藏 overflow: hidden;
          3.文字溢出部分用省略号显示 text-overflow: ellipsis;
      */
      .textomit {
        width: 150px;
        height: 80px;
        background-color: #f828d9;
        margin: 100px auto;
        /* white-space: normal; */
        /* 文字显示不开自动换行 */
        white-space: nowrap;
        /* 文字显示不开也不换行 */
        overflow: hidden;
        /* 隐藏溢出部分 */
        text-overflow: ellipsis;
        /* 溢出部分省略号显示 */
      }

      /* 多行溢出文字省略号显示步骤（兼容性差）
          1.溢出部分隐藏 overflow: hidden;
          2.文字溢出部分用省略号显示 text-overflow: ellipsis;
          3.弹性伸缩盒子模型显示  display: -webkit-box;
          4.限制在一个块元素显示的文本的行数 -webkit-line-clamp: 2;
          5.设置或检索伸缩盒子大小的子元素的排列方式 -webkit-box-orient: vertical;
      */
      .textomit_many {
        width: 150px;
        height: 65px;
        background-color: #f828d9;
        margin: 100px auto;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        /* 弹性伸缩盒子模型显示 */
        -webkit-line-clamp: 3;
        /* 限制在一个块元素显示的文本的行数 */
        -webkit-box-orient: vertical;
        /* 设置或检索伸缩盒子大小的子元素的排列方式 */
      }

      /* margin负值运用 */
      .marginburden {
        width: 755px;
        height: 202px;
        margin: 50px auto;
      }

      .marginburden ul li {
        float: left;
        list-style: none;
        /* 清除li前面的小点 */
        width: 150px;
        height: 200px;
        border: 1px solid #e51414;
        margin-left: -1px;
      }

      .marginburden ul li:hover {
        /* 如果盒子没有定位，则相对定位
           如果盒子都有定位，则提高z-index */
        position: relative;
        border-color: #0fce35;
        z-index: 999;
      }

      /* 文字围绕浮动元素 */
      .textround {
        width: 300px;
        height: 52px;
        background-color: #0fce35;
        margin: 50px auto;
      }
      .pic {
        float: left;
        width: 120px;
        height: 41px;
        padding: 5px;
      }
      .pic img {
        width: 100%;
      }

      /* 行内块元素的运用 */
      .inline-block-use {
        width: 100%;
        margin: 50px auto;
        text-align: center;
      }

      .inline-block-use a {
        display: inline-block;
        width: 36px;
        height: 36px;
        background-color: #f7f7f7;
        border: 1px solid #ccc;
        margin: 1px;
        text-align: center;
        line-height: 36px;
        color: #333;
        font-size: 14px;
      }

      .inline-block-use .prev,
      .inline-block-use .next {
        width: 85px;
      }

      .inline-block-use .current,
      .inline-block-use .elp {
        background: #fff;
        border: none;
      }

      .inline-block-use input {
        height: 36px;
        width: 45px;
        border: 1px solid #ccc;
      }

      .inline-block-use input:focus {
        background: #fff;
      }

      .inline-block-use button {
        width: 60px;
        height: 36px;
        background-color: #f7f7f7;
        border: 1px solid #ccc;
      }

      /* 三角运用 */
      .triangle-use {
        width: 160px;
        height: 24px;
        border: 1px solid red;
        margin: 50px auto;
        line-height: 24px;
      }

      .triangle-use .discount {
        position: relative;
        float: left;
        width: 90px;
        height: 100%;
        background-color: red;
        text-align: center;
        color: #fff;
        font-weight: 700;
        margin-right: 8px;
      }

      .triangle-use .discount i {
        position: absolute;
        right: 0;
        top: 0;
        width: 0;
        height: 0;
        border-color: transparent #fff transparent transparent;
        border-style: solid;
        border-width: 24px 12px 0 0;
      }

      .triangle-use .price {
        font-size: 12px;
        color: grey;
        text-decoration: line-through;
      }
    </style>
  </head>
  <body>
    <!-- 页面布局思路
    1.确认页面版心（可视区）
    2.分析行模块，在分析其中的列模块
    3.一行中列模块的浮动，大小
    4. 先HTML，再CSS-->
    <div id="text_attributes">
      <p id="word_attributes">啦啦啦，对p标签进行美化</p>
      <br />
      <p style="color: blue">这是第二个p</p>
      <br />
      <!-- 行内样式表 -->
      <span>233</span><br />
      <ol>
        <li>666</li>
      </ol>
      <br />
      <ul>
        <li><p>1</p></li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
    <div class="try"></div>
    <br />
    <a href="../HTML标签.html">点击我</a>
    <br /><br />
    <form action="#">
      <label for="input1">输入框</label>
      <input type="text" id="input1" />
    </form>
    <br />
    <div id="test">我要垂直居中</div>
    <br />
    <h3>浮动</h3>
    <div id="floatfather" class="clearfix clearfix1">
      <div class="floattest">1</div>
      <div class="floattest">2</div>
      <div class="floattest" id="floatright">3</div>
      <div id="compare">4</div>
      <div id="clear"></div>
    </div>
    <div>666</div>
    <br />
    <h3>相对定位</h3>
    <div class="box1"></div>
    <div class="box2"></div>
    <h3>绝对定位</h3>
    <div class="father">
      <div class="son"></div>
    </div>
    <div class="fixeddiv">
      <h3>固定定位</h3>
    </div>
    <div class="stickydiv">
      <h3>粘性定位</h3>
    </div>
    <div class="showorhidden">元素的显示与隐藏</div>
    <div class="triangle">
      <h3>CSS三角形制作</h3>
      <div class="tri1"></div>
      <div class="tri2"></div>
      <div class="tri3"><span></span></div>
    </div>
    <div class="wordcenter">
      <img
        src="../images/text.jpg"
        alt="图片文字垂直居中对齐"
      />这个图片是干嘛的呢<textarea
        name=""
        id=""
        cols="30"
        rows="10"
      ></textarea>
    </div>
    <div class="intervalsolve">
      <img
        src="../images/text.jpg"
        alt="图片底部空白空隙解决"
      />图片底部空白空隙
    </div>
    <div class="textomit">
      看清楚了啊，此处省略一万字，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    </div>
    <div class="textomit_many">
      看清楚了啊，此处省略一万字，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    </div>
    <div class="marginburden">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
    <div class="textround">
      <div class="pic">
        <img src="../images/text.jpg" alt="文字围绕浮动元素" />
      </div>
      <p>文字围绕浮动元素</p>
    </div>
    <div class="inline-block-use">
      <a href="#" class="prev">&lt;&lt;上一页</a
      ><a href="#" class="current">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
      <a href="#">6</a>
      <a href="#" class="elp">...</a>
      <a href="#" class="next">&gt;&gt;下一页</a>
      到第<input type="text" />页
      <button>确定</button>
    </div>
    <div class="triangle-use">
      <span class="discount"
        >￥1650
        <i></i>
      </span>
      <span class="price">￥5650</span>
    </div>
  </body>
</html>
